@mixin flash($color, $text-color) {
  background-color: $color;
  color: $text-color;
}

@mixin flash-before($str) {
  &::before {
    content: $str;
  }
}

@mixin info-before {
  @include flash-before('ℹ️ ');
}

@mixin success-before {
  @include flash-before('✅ ');
}

@mixin warning-before {
  @include flash-before('⚠️ ');
}

@mixin error-before {
  @include flash-before('❌ ');
}

@mixin danger-before {
  @include flash-before('🛑 ');
}

.stripe.flash-stripe {
  @include flash($info-color, $info-text-color);
  @include info-before;

  grid-area: flash;

  padding-top: 20px;
  padding-bottom: 20px;

  &:empty {
    display: none;
  }

  &.flash-success {
    @include flash($success-color, $success-text-color);
    @include success-before;
  }

  &.flash-error {
    @include flash($error-color, $error-text-color);
    @include error-before;
  }
}

// Similar to flashes but not in the top stripe
@mixin alert($color, $text-color) {
  @include flash($color, $text-color);
  border-color: $text-color;
}

.alert {
  @include alert($info-color, $info-text-color);
  @include info-before;

  padding: 10px;
  border-radius: 5px;
  border-width: 1px;
  border-style: dashed;

  &.alert-success {
    @include alert($success-color, $success-text-color);
    @include success-before;
  }

  &.alert-warning {
    @include alert($warning-color, $warning-text-color);
    @include warning-before;
  }

  &.alert-error {
    @include alert($error-color, $error-text-color);
    @include error-before;
  }

  &.alert-danger {
    @include alert($danger-color, $danger-text-color);
    @include danger-before;
  }
}
